<template>
  <van-dialog
    v-model:show="showModal"
    title="实名认证"
    :show-cancel-button="true"
    cancel-button-text="稍后再去"
    confirm-button-text="立即认证"
    @confirm="goToVerify"
    @cancel="skipVerify"
    class="verify-modal"
  >
    <div class="modal-content">
      <div class="icon-wrapper">
        <van-icon name="shield-o" size="48" color="#00D4AA" />
      </div>
      <h3>完成实名认证</h3>
      <p class="description">
        为了保障您的账户安全，请完成实名认证。认证后可以享受更多服务功能。
      </p>
      <div class="benefits">
        <div class="benefit-item">
          <van-icon name="checked" size="16" color="#00D4AA" />
          <span>提升账户安全性</span>
        </div>
        <div class="benefit-item">
          <van-icon name="checked" size="16" color="#00D4AA" />
          <span>享受更多服务功能</span>
        </div>
        <div class="benefit-item">
          <van-icon name="checked" size="16" color="#00D4AA" />
          <span>获得专属权益</span>
        </div>
      </div>
    </div>
  </van-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const showModal = ref(false)

// 监听props变化
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

// 监听visible变化
watch(() => props.visible, (newVal) => {
  showModal.value = newVal
})

// 立即认证
const goToVerify = () => {
  showModal.value = false
  router.push('/verify-identity')
}

// 稍后再去
const skipVerify = () => {
  showModal.value = false
  // 可以在这里保存用户选择，比如设置一个标记
  localStorage.setItem('verify_remind_later', 'true')
}

// 暴露方法给父组件
defineExpose({
  show: () => {
    showModal.value = true
  },
  hide: () => {
    showModal.value = false
  }
})
</script>

<style scoped>
.verify-modal {
  --van-dialog-border-radius: 16px;
  --van-dialog-header-padding: 24px 24px 16px;
  --van-dialog-content-padding: 0 24px 24px;
}

.modal-content {
  text-align: center;
  padding: 16px 0;
}

.icon-wrapper {
  margin-bottom: 16px;
}

.modal-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.benefits {
  text-align: left;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.benefit-item:last-child {
  margin-bottom: 0;
}

.benefit-item span {
  flex: 1;
}
</style>

